<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<canvas id="box" width="500" height="500">您的浏览器不支持画布</canvas>
<script type="text/javascript">
    //通过画布获取画笔
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    pen.clearRect(0,0,box.width,box.height);//清除画布
    //第一个画的图形---目标图形（destination）
    pen.beginPath();
    pen.arc(200,200,100,0,Math.PI*2);
    pen.fillStyle="blue";
    pen.fill();
    pen.closePath();
    pen.stroke();
//    可以看到两个图像重叠的部分
    pen.globalCompositeOperation = "lighter";

   //第二个图形叫做----源图像（source）
    pen.beginPath();
    pen.rect(200,200,200,200);
    pen.fillStyle="yellow";
    pen.fill();
    pen.closePath();
    pen.stroke();




</script>
</body>
</html>